<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test_圆柱体</title>
  <style>
    *{
      margin:0 auto;
      padding:0;
    }
    body{
      background:rgb(196,196,198);
    }
    #main{
       position:relative;
       width:800px;
       height:800px;
       margin-top:200px;
       background: linear-gradient(skyblue,khaki);
       border:1px solid red;
    }
    /* 立方体 和 圆柱体的 地基,默认以物体中心为基础建构  ,z轴位置需要 计算设置 ,置于物体中西那位置 */
    .cc_base{
      width:100px;
      height:100px;
      transform-origin:50% 50%;
      transform-style: preserve-3d;
      border:1px solid red;
    }
    .cc_base *{
      position:absolute;
      transform-style: preserve-3d;/* 以3D空间方式呈现 , 默认2d平面(怎么看都是扁的) */
    }
    .cc_face{
      top:0;
      left:0;
      background:rgb(110,129,254);
      background-size:100% 100%;
      border:1px solid red;
      /* transform-style: preserve-3d; 以3D空间方式呈现 , 默认2d平面(怎么看都是扁的) */
    }
    /* 整个箭头 容器  */
    .cc_arrow{
      width:100%;
      height:100%;
    }
    /* 轴指示箭头 x轴 */
    .cc_arrow_x{
      width:140px;
      height:20px;
      top:50%;
      left:50%;
      margin-top:-10px;
      background:url(./img/2.png);
      background-repeat:no-repeat;
      background-size:60px 20px;
      background-position:100% 0%;
      transform:rotate(0deg) rotateX(0deg) rotateY(0deg)  rotateZ(0deg);
    }
    .cc_arrow_x *{
      width:100%;
      height:100%;
      background:url(./img/2.png);
      background-repeat:no-repeat;
      background-size:60px 20px;
      background-position:100% 0%;
      transform:rotateX(90deg) rotateY(0deg)  rotateZ(0deg);
    }
    /* 轴指示箭头 y轴 */
    .cc_arrow_y{
      width:20px;
      height:140px;
      left:50%;
      top:50%;
      margin-left:-10px;
      background:url(./img/3.png);
      background-repeat:no-repeat;
      background-size:20px 60px;
      background-position:0% 100%;
      transform:rotate(0deg) rotateX(0deg) rotateY(0deg)  rotateZ(0deg);
    }
    .cc_arrow_y *{
      width:100%;
      height:100%;
      background:url(./img/3.png);
      background-repeat:no-repeat;
      background-size:20px 60px;
      background-position:0% 100%;
      transform:rotateX(0deg) rotateY(90deg)  rotateZ(0deg);
    }
    .cc_arrow_z{
        position:absolute;
        transform-origin:0% 0%;
        width:20px;
        height:140px;
        left:50%;
        margin-left:-10px;
        top:50%;
        /* margin-top:-10px; */
        background:url(./img/4.png);
        background-repeat:no-repeat;
        background-size:20px 60px;
        background-position:0% 100%;
        transform:rotate(0deg) rotateX(90deg) rotateY(0deg)  rotateZ(0deg);
    }
    .cc_arrow_z *{
        width:100%;
        height:100%;
        background:url(./img/4.png);
        background-repeat:no-repeat;
        background-size:20px 60px;
        background-position:0% 100%;
        transform:rotateX(0deg) rotateY(90deg)  rotateZ(0deg);
    }
    .cc_face:hover{
      background:rgb(250,119,102);
    }
  </style>
</head>
<body>

<div id="main">

     <!-- 圆柱体 base 地基 -->
     <div  id='test' class="cc_base" e-id='base' style="background:rgb(19,5,249,.3); transform:rotateX(46deg) rotateY(0deg) rotateZ(16deg);"> 
           <!-- 箭头 -->
          <div class="cc_arrow">
                <div class="cc_arrow_x"><div></div></div>
                <div class="cc_arrow_y"><div></div></div>
                <div class="cc_arrow_z"><div></div></div>
         </div>
          <eng e-for='faces'>  <!-- 0,1 上下底,2-n=边面  -->
                <div class="cc_face">
                     {{$_index}}
               </div>
          </eng>

     </div>
</div>


  
</body>
</html>
<script src="./js/eng_1.2.2_min.js"></script>
<script>
  
console.log(123123)

 var app=new Eng({
        el:'test',
        data:{
            size:[100,200,5], //圆柱体 的直径 ; 高度 ; 面数(至少大于5) 
            faces:[]
        },
        watcher:{
             //调整 宽 高 面数
            'size':function(o,n,i,c){
                  var a=[],b,c,d,e,f,g;
                      l=n.length;
                      while(l--){
                           a.push({
                               txt:12312312312
                           });
                      };
                      i.$_gData.faces=a;
                      // debugger
             },
        },
        watcherFor:{
            //
            faces:function(i,c){

            },
        },
        created:function(){
             console.log(123123123);
        }
 });
var fun=function(){};

</script>